<template>
  <div class="ScaleBox" ref="ScaleBox" :style="{
      width: width + 'px',
      height: height + 'px',
    }">
    <slot></slot>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';
  export default {
    name: "ScaleBox",
    props: {},
    data() {
      return {
        scale: 0,
        // width: 1920,
        // height: 1080,
         width: 1482,
        height: 647,
      };
    },
    computed: {
        ...mapGetters({
            sidebar:'sidebar'
        })
    },
    watch:{
    // 监听侧边栏是否展开
    'sidebar.opened':{
      deep:true,
      handler(val) {
        this.setScale();
      }
    }
    },
    mounted() {
      this.setScale();
      window.addEventListener("resize", this.debounce(this.setScale));
    },
    methods: {
      getScale() {
        // 固定好16：9的宽高比，计算出最合适的缩放比
        const {
          width,
          height
        } = this;
        let ww = "";
        const  wh = (window.innerHeight-85) / height;
        // 展开
        if (this.sidebar.opened) {
             ww = (window.innerWidth-200) / width;
        }else {
             ww = (window.innerWidth-54) / width;
        }
        // console.log(window.innerHeight);
        // console.log(ww < wh ? ww : wh);
        // return ww < wh ? ww : wh;
        let arr = [];
        arr.push(ww);
        arr.push(wh);
        return arr;
      },
      setScale() {
        // console.log(this.getScale());
        // 获取到缩放比例，设置它
        this.scale = this.getScale();
        if (this.$refs.ScaleBox) {
          this.$refs.ScaleBox.style.setProperty("--scale", this.scale);
        }
      },
      debounce(fn, delay) {
        const delays = delay || 200;
        let timer;
        return function () {
          const th = this;
          const args = arguments;
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(function () {
            timer = null;
            fn.apply(th, args);
          }, delays);
        };
      },

    },
  };
</script>

<style lang="scss">
  body {
    overflow: hidden;
  }

  #ScaleBox {
    --scale: 1;
  }

  .ScaleBox {
    position: absolute;
    transform: scale(var(--scale)) translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    transform-origin: 0 0;
    left: 50%;
    top: 50%;
    // transition: 0.1s;
    z-index: 999;
    // background: rgba(255, 0, 0, 0.3);
  }
</style>
